<template>
  <div class="container">
    <!-- 左侧菜单 -->
    <el-row
      class="main-content"
      :gutter="20"
    >
      <el-col
        :span="5"
        class="menu-container"
      >
        <div class="menu-wrapper">
          <el-menu
            :default-active="activeMenu"
            class="menu"
            @select="handleMenuSelect"
          >
            <el-menu-item index="personalCenter">
              <i class="el-icon-user"></i>
              <span slot="title">个人中心</span>
            </el-menu-item>
            <el-menu-item index="productManage">
              <i class="el-icon-shopping-bag-2"></i>
              <span slot="title">产品列表</span>
            </el-menu-item>
            <el-menu-item index="requirementManage">
              <i class="el-icon-document-copy"></i>
              <span slot="title">需求列表</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>

      <!-- 右侧内容区域 -->
      <el-col
        :span="19"
        class="content-container"
      >
        <div class="content-wrapper">
          <!-- 个人中心组件 -->
          <personal-center v-if="activeMenu === 'personalCenter'"></personal-center>
          <product-manage v-if="activeMenu === 'productManage'"></product-manage>
          <requirement-manage v-if="activeMenu === 'requirementManage'"></requirement-manage>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 导入子组件
import personalCenter from "./components/PersonalCenter.vue";
import productManage from "./components/productManage.vue";
import requirementManage from "./components/requirementManage.vue";
import { mapGetters } from "vuex";
export default {
  name: "MainLayout",
  components: {
    personalCenter,
    requirementManage,
    productManage,
  },
  data() {
    return {
      activeMenu: "personalCenter", // 默认激活的菜单项
    };
  },
  computed: {
    ...mapGetters("user", ["userInfo"])
  },
  mounted() {
    // 获取当前激活的菜单项
    this.activeMenu = this.$route.query.activeMenu;
    if(this.userInfo.companyId == null){
      this.$message.warning("请先绑定企业");
    }
  },

  methods: {
    /**
     * 处理菜单选择事件
     * @param {string} index - 菜单项的索引
     */
    handleMenuSelect(index) {
      this.activeMenu = index;
    },
  },
};
</script>

<style scoped>
.container {
  height: calc(100vh - 40px); /* 减去上下padding */
  padding: 20px;
  box-sizing: border-box;
}

.main-content {
  height: 100%;
  overflow: hidden;
}

.menu-container {
  height: 100%;
  box-sizing: border-box;
}

.menu-wrapper {
  height: 100%;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.menu {
  height: 100%;
  border: none;
}

.content-container {
  height: 100%;
  padding: 0;
}

.content-wrapper {
  height: 100%;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

/* 清除默认的 el-col 间距 */
.el-row {
  margin-left: -10px !important;
  margin-right: -10px !important;
}
</style>